<template>
	<view class="container">
		
		<view class="title">
		  <view class="font-36 text-bold c-base">健康评估</view>
		  <view class="font-24 c-base">健康评估先行，为健康精准护航</view>
		  <image :src="$util.img('image/assessment_1.png')" mode="" class="icon"></image>
		</view>
		
		<view class="boxPanel rel" style="margin-top: -40rpx;">
			<view class="color-title2 m-b-20 bggreen">
				<text class="font-weight-6 m-r-20">监测数据</text>
				<text class="font-24">细致监测，数据呈实</text>
			</view>
			<view class="">
				<view class="flex m-b-10" v-for="(item,index) in profileInfo.profile" :key="index">
					<view class="font-24 flex-1 flex-y-baseline" v-for="(opitem,opindex) in item" :key="opindex">
						<text class="c-77 m-r-24">{{opitem.name}}</text>{{opitem.value}}{{opitem.default_unit}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="mains">
			<view class="text-bold flex-y-center rel font-30">
				<text class="line"></text>
				指导意见
			</view>
			<view class="goods-details" v-if="detail.health_assessment">
				<rich-text :nodes="detail.health_assessment" :data-nodes="detail.health_assessment"></rich-text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import htmlParser from '@/common/js/html-parser';
	export default {
		data() {
			return {
				type: '',
				detail: {},
				profileInfo: {},

			}
		},
		onLoad(data) {
			this.type = data.type;
			uni.setNavigationBarTitle({
				title:  data.title
			});
			this.getDetail()
			this.getHealthData();
		},
		methods: {
			getHealthData() {
				this.$api.sendRequest({
			      url: "/api/userHealth/index",
			      data: {},
			      success: res => {
			        if(res.code == 0 && res.data) {
						let data = res.data;
						
						const profileInfo = data.profile;

						const chunkedArray = profileInfo.reduce((result, current, index, array) => {
						if (index % 2 === 0) {
							result.push(array.slice(index, index + 2));
						}
						return result;
						}, []);
						this.profileInfo = data;
						this.profileInfo.profile = chunkedArray;

						console.log(chunkedArray);

			        }else {
						// this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
			getDetail() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getUserReport",
			      data: {
					type: this.type
				  },
			      success: res => {
			        if(res.code == 0) {
						this.detail = res.data;
						if (this.detail.health_assessment) this.detail.health_assessment = htmlParser(this.detail.health_assessment);
			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
// 顶部
.title {
  position: relative;
  padding: 0 24rpx 80rpx;
  background: $color-title2;
  .icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 304rpx;
    height: 256rpx;
  }
}

.bggreen {
	background: #EBFBF4;
	border-radius: 20rpx;
	padding: 18rpx 20rpx;
}

.mains {
	margin: 24rpx;
	padding: 24rpx 0;
	background-color: #fff;
	border-radius: 20rpx;
}
.line {
	display: inline-block;
	width: 7rpx;
	height: 30rpx;
	border-radius: 0 10rpx 10rpx 0;
	background: $color-title2;
	margin-right: 18rpx;
}
</style>
